<template>
	<widget-root :styles="styles" :class="themeName">
		<view class="user-info flex-col" :style="[infoStyle]">
			<!-- #ifndef  H5 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar :is-back="false" :title="title" :title-bold="true" :is-fixed="false" :border-bottom="false"
					:background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
					:title-color="percent > 0.5 ? '#000' : '#fff'"></u-navbar>
			</u-sticky>
			<!-- #endif -->
			<view class="user-top flex-1">
				<view class="flex" v-if="isLogin">
					<router-link to="/bundle/pages/user_profile/user_profile">
						<image class="icon-avatar" :src="userInfo.avatar" />
					</router-link>
					<view class="m-l-30 flex-1">
						<view style="display: flex;">
							<view class="xxl white" v-if="userInfo.nickname">
								{{userInfo.nickname}}
							</view>
							<userInfoRoleVue style="margin-left: 20rpx;"></userInfoRoleVue>
						</view>
						<view class="flex user-id m-t-10" v-if="userInfo.id && content.show_user_sn">
							<view class="xs m-r-20 white">会员ID: {{userInfo.id}}</view>
							<view class="xs copy-btn m-l-5" @tap.stop="$copy(userInfo.id)">复制</view>
						</view>
						<view class="flex user-id m-t-10" v-if="userInfo.first_leader_info.mobile">
							<view class="xs m-r-20 white">上级: {{userInfo.first_leader_info.mobile}}</view>
							<view class="xs copy-btn m-l-5" @tap.stop="phone(userInfo.first_leader_info.mobile)">拨号</view>
						</view>
					</view>
				</view>
				<router-link v-else to="/pages/login/login">
					<view class="flex white">
						<image class="icon-avatar"
							:src="content.avatar_type==2 && content.avatar ? $getImageUri(content.avatar) : require('@/static/images/icon_portrait.png') "
							mode="" />
						<view class="m-l-20 flex-1">
							<view class="xxl">
								点击登录
							</view>
							<view class="xs">登录体验更多功能</view>
						</view>
					</view>
				</router-link>
			</view>
			<view>
				<view class="assets-nav" @click="assterNav">
					<!-- <view style="display: flex; justify-content: space-between; font-size: 11.5px">
						<view>
							<view >
								第 100 次成团
							</view>
						</view>
						<view style="color: #666666">历史记录</view>
					</view> -->
					<view style=" font-size: 28rpx; font-weight: bold; margin: 12px 0 17px 0">
						第 {{ userInfo.team_count }} 次成团
					</view>
					<!-- <view class="assets_ts">
						<view class="w">
							<view>可用余额</view>
							<view>1000</view>
						</view>
						<view class="w">
							<view>购物积分</view>
							<view>1000</view>
						</view>
					</view> -->
					<view style="display: flex;" >
						<view v-for="(item,index) in content.data" :key="index" style="display: flex;" class="assets_ts">
							<view class="celan" v-if="item.field === 'user_integral'">
								<view class="colo1 ">
									{{ item.name }}
								</view>
								<view class="colo">{{userInfo.user_integral || 0}}</view>
							</view>
							<view class="celan"  v-if="item.field === 'balance'">
								<view class="colo1">
									{{ item.name }}
								</view>
								<view class="colo" >{{userInfo.user_money || 0}}</view>
							</view>
							<view class="celan"  v-if="item.field === 'not_withdraw_balance'">
								<view class="colo1">
									{{ item.name }}
								</view>
								<view class="colo">{{ userInfo.not_withdraw_balance || 0}}</view>
							</view>
						</view>
					</view>
					<view class="dibu">
						<!-- <view @click="exchangeJump(1)">积分转余额</view> -->
						<view @click="exchangeJump(2)">提现余额</view>
					</view>
				</view>
			</view>
			<!-- <view class="assets-nav white flex" v-if="false">
				<router-link class="flex-1" to="/bundle/pages/user_wallet/user_wallet" v-if="showAssets(1)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.user_money || 0}}</view>
						<view>余额</view>
					</view>
				</router-link>

				<router-link class="flex-1" to="/bundle/pages/user_sign/user_sign" v-if="showAssets(2)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.user_integral || 0}}</view>
						<view>积分</view>
					</view>
				</router-link>
				<router-link class="flex-1" to="/bundle/pages/coupon/coupon" v-if="showAssets(3)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.coupon || 0}}</view>
						<view>优惠券</view>
					</view>
				</router-link>
				<router-link class="flex-1" to="/bundle/pages/goods_collects/goods_collects" v-if="showAssets(4)">
					<view class="flex-col col-center">
						<view class="number">{{userInfo.collect || 0}}</view>
						<view>收藏</view>
					</view>
				</router-link>
			</view> -->
			<!-- <router-link class="flex-1" to="/bundle/pages/user_vip/user_vip" v-if="false">
				content.show_member
				<view class="user-grade flex row-between">
					<view class="sm"> <span class="lg m-r-12 weight-500" style="font-style: italic;">V <span
								class="xxs">{{userInfo.level_rank || ''}}</span></span>{{isLogin ? (userInfo.level_name || '') : '登录查看会员权益'}}
					</view>
					<view class="xs">了解会员 <u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</router-link> -->
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	import userInfoRoleVue from './components/user-info-role.vue';
	export default {
		components: {
			userInfoRoleVue
		},
		props: {

			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			percent: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: "个人中心"
			}
		},
		data() {
			return {
				onShowIs:false
			}
		},
		methods: {
			exchangeJump(e){
				if( this.onShowIs == false){
					console.log(123);
					this.onShowIs = true
					if(e == 1){
						
						uni.navigateTo({
							url:'/bundle/pages/convertibility/pointsRedemption'
						})
					}else{
						uni.navigateTo({
							url:'/bundle/pages/convertibility/convertibility'
						})
					}
				}
				setTimeout(()=>{
					this.onShowIs = false
				},1500)
			},
			phone(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile, //仅为示例
				});
			}
		},
		computed: {
			showAssets() {
				console.log(this.content);
				return (type) => {
					return this.content.assets.includes(type)
				}
			},
			infoStyle() {
				const {
					background_image,
					background_type
				} = this.content
				if (!background_image || background_type == 1) {
					return {}
				}
				return {
					'background-image': `url(${this.$getImageUri(this.content.background_image)})`,
				}
			},
			assterNav(){
				const token = uni.getStorageSync('store_token')
				if(!token){
					uni.redirectTo({
						url:'/pages/login/login'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user-info {
		@include background_image(90deg, 0%, 100%, '../../../static/images/bg_user.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.user-top {
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 30rpx;

			// #endif
			.icon-avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				border: 1px solid #f8f8f8;
			}

			.user-id {
				display: inline-flex;
				border: 1px solid #fff;
				border-radius: 100rpx;
				padding-left: 20rpx;

				.copy-btn {
					padding: 3rpx 20rpx;
					border-radius: 20rpx;
					background: #fff;
				}
			}
		}

		// .assets-nav {
		// 	padding: 30rpx 0 20rpx;

		// 	.number {
		// 		font-size: 32rpx;
		// 	}
		// }

		// .user-grade {
		// 	color: #ffe0a1;
		// 	height: 80rpx;
		// 	background: url('../../../static/images/bg_user_grade.png');
		// 	background-size: 100%;
		// 	padding: 0 20rpx;
		// 	margin: 0 20rpx;
		// }
		.assets-nav {
			width: 676rpx;
			// height: 204px;
			background-color: #fff;
			margin: 0 auto;
			padding: 19px 23.5px;
			border-radius: 20rpx;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
			
			.assets_ts{
				display: flex;
				justify-content: space-between;
				// margin-bottom: 80rpx;
				padding: 20rpx 0;
				width: 300rpx;
				.w{
					width: 50%;
					font-size: 30rpx; 
					font-weight: bold; 
				}
			}
			.assets_ts:first-child{
				width: auto;
			}
			.celan{
				// width: calc(100% /3);
				// width: calc(582rpx / 3);
				margin-right: 20rpx;
			}

			.dibu {
				display: flex;
				justify-content: space-between;
				margin-top: 15rpx;
				view {
					width: 135px;
					height: 47px;
					background-color: #ff584d;
					text-align: center;
					line-height: 47px;
					color: #fff;
					font-weight: bold;
					font-size: 14px;
					border-radius: 50px;
				}
			}

			.colo {
				font-weight: bold;
				font-size: 20px;
				margin-top: 5px;
			}

			.colo1 {
				font-weight: bold; 
				font-size: 30rpx; 
			}
		}
	}
</style>